 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 100px;
				height: 50px;
				margin-top: 20px;
				background-color: skyblue;
				border: 2px pink solid;
				opacity: 0.3;
				filter: alpha(opacity:30);
			}
		</style>
	</head>
	<body>
		<div></div>
		<div></div>
		<div></div>
	</body>
	<script src="JS/MyAnimation.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		window.onload = function(){
			var div_box = document.getElementsByTagName('div')
			var timer = null;
			div_box[0].onmouseover = function(){
				trans(this,'width',150)
			}
			div_box[0].onmouseout = function(){
				trans(this,'width',100)
			}
			div_box[1].onmouseover = function(){
				trans(this,'height',100)
			}
			div_box[1].onmouseout = function(){
				trans(this,'height',50)
			}
			div_box[2].onmouseover = function(){
				trans(this,'opacity',100)
			}
			div_box[2].onmouseout = function(){
				trans(this,'opacity',30)
			}

		}

	</script>
</html>
